<template>
  <div class="web-container events">
    <!-- <div class="events-swiper" v-show="true">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in 16" :key="index" @click="goToContent">
            <div class="swiper-label">
              <span class="label-time">
                10月27日 09:00
              </span>
              <span class="label-desc">
                2018首届缠论金融论坛暨缠逝十年纪念大会
              </span>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <div class="swiper-events-prev"></div>
      <div class="swiper-events-next"></div>
    </div> -->
    <div class="content">
      <span class="title">全部活动</span>
      <div class="events-list">
        <div class="events-item" v-for="(item,index) in activityList" :key="index" @click="goToContent(item)">
          <span class="events-cover" :style="{backgroundImage:'url('+ item.cover + ')'}"></span>
          <span class="events-time">{{item.createTime}}</span>
          <span class="events-desc">{{item.activityName}}</span>
        </div>
      </div>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="9" layout="total, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { activitiesList } from "@/api/index";
import Swiper from "swiper";
export default {
  data() {
    return {
      swiper: "",
      activityList: [],
      currentPage: 1,
      total: 0
    };
  },
  created() {},
  mounted() {
    this.swiper = new Swiper(".swiper-container", {
      slidesPerView: 4,
      spaceBetween: 20,
      slidesPerGroup: 4,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true
      },
      navigation: {
        nextEl: ".swiper-events-next",
        prevEl: ".swiper-events-prev"
      }
    });
  },
  components: {},
  created() {
    this.init();
  },
  methods: {
    init() {
      //首页专题互动
      activitiesList(1, 9)
        .then(res => {
          // console.log(res.data.data);
          this.total = res.data.total;
          this.activityList = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    /**
     * 进入详情
     */
    goToContent(item) {
      this.$router.push({
        name: "eventsContent",
        query: {
          data:JSON.stringify(item)
          // activityId: item.activityId,
          // title: item.activityName
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.events {
  .events-swiper {
    position: relative;
    margin-top: 20px;
    border-radius: 10px;
    background: #fff;
    padding: 20px;
    .swiper-events-next,
    .swiper-events-prev {
      border: none;
      position: absolute;
      outline: none;
      top: 35%;
      width: 40px;
      height: 40px;
      z-index: 10;
      cursor: pointer;
      background-position: center;
      background-repeat: no-repeat;
    }
    .swiper-events-prev {
      background-image: url("/static/images/base/left-arrow.png");
      left: 5px;
    }
    .swiper-events-next {
      background-image: url("/static/images/base/right-arrow.png");
      right: 5px;
    }
    .swiper-container {
      width: 1100px;
      height: 380px;
      .swiper-slide {
        position: relative;
        background: url("/static/images/base/events-swiper.png") no-repeat;
        background-size: cover;
        height: 260px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
      }
      .swiper-label {
        position: absolute;
        left: 0px;
        bottom: 0px;
        height: 65px;
        padding: 5px;
        .label-time {
          font-size: 12px;
          color: #a1a1a1;
          display: block;
        }
        .label-desc {
          display: block;
          font-size: 16px;
          color: #252525;
        }
      }
    }
  }
  .content {
    min-height: 400px;
    margin-top: 24px;
    background: #fff;
    border-radius: 10px;
    padding: 0px 20px 20px 20px;
    .title {
      display: block;
      font-size: 26px;
      padding: 20px 0;
      border-bottom: 1px solid #c1c1c1;
    }
    .events-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .events-item:nth-child(3n+1){
        margin-left: 0px;
      }
      .events-item {
        margin-left: 10px;
        cursor: pointer;
        width: 375px;
        height: 255px;
        margin-top: 20px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        .events-cover {
          height: 180px;
          width: 100%;
          display: block;
          background: url("/static/images/base/place.png") no-repeat;
          background-size: cover;
          background-position: center;
        }
        .events-time {
          padding: 0px 10px;
          margin-top: 10px;
          display: block;
          font-size: 16px;
          color: #a1a1a1;
        }
        .events-desc {
          padding:0px 10px;
          margin-top:5px;
          display: block;
          font-size: 18px;
          line-height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
<style lang="less">
.events {
  .events-swiper {
    .swiper-pagination-bullet-active {
      background: #1de3af;
    }
    .swiper-pagination-bullet {
      width: 20px;
      height: 20px;
    }
  }
}
</style>



